<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>组合框</title>
	</head>
	<body>
		<div id="app">
			<combobox 
				label="请选择了解信息的渠道"
				:list="['报纸', '网络', '朋友介绍']"
				v-model="selectedVal">
			</combobox>
			<span>选中的值是：{{selectedVal}}</span>
		</div>
	    
	    <script type=text/javascript src="../../vue.js"></script>
		<script>
		    const app = Vue.createApp({
                data() {
                    return {
                        selectedVal: ''
                    }
                }
            });
            
			app.component('combobox', {  
                props: ['label', 'list', 'modelValue'],
                template: `
                    <div>
                        <label style="float: left;">
                          {{ label }}
                        </label>
                        <table>
                        	<tr>
                        	  <td>
                        	    <input 
                        	        :value="modelValue"  
                        	        @input="$emit('update:modelValue', $event.target.value)">
                        	  </td>
                        	</tr>
                        	<tr>
                    	     	<td>
                    		      <select
                    		        :value="modelValue"
                    		      	@change="$emit('update:modelValue', $event.target.value)">
                    		      	<option disabled value="">请选择</option>
                    		      	<option v-for="item in list" :value="item">
                    		      		{{item}}
                    		      	</option>
                    		      </select>
                    	      </td>
                            </tr>
                        </table>
                    </div>
                `
            })
			app.mount('#app');
		</script>
	</body>
</html>